<template>
    <div class="wrap-2 update_6p8_mobile_login update_6p8_mobile_app"  ref="wizwrap">
        <van-dialog v-model="show" :title="statusTitle" confirmButtonColor="#075ebb" class="login-alert"></van-dialog>
        <div class="top-box" v-if="!autoLogin">
            <div class="wiz-new-logo"><img :src="logo" alt=""/></div>
            <div class="wiz-new-bg"><img id="imgBg" src="./images/wzb_new_login_bg.png" alt=""/></div>
            <!-- <div class="wiz-new-shadow"><img src="./images/wzb_new_login_bg.png" alt=""/></div> -->
        </div>
        <div class="own-box-login" v-if="!autoLogin">
            <div class="own-box-area">
                <div class="wiz-box" >
                    <van-tabs v-model="activeTab" style="background: #f7f7f7;">
                        <!-- 账号登录 -->
                        <van-tab :title="$t('account_login')" :name="1">
                            <div class="wiz-form">
                                <div class="tips">
                                <!-- <h2>{{$t('lab_login_tips_13')}}</h2> -->
                                </div>
                                <!-- 登录网址 -->
                                <!-- <div class="wiz-user input-box" v-if="windowPlus" style="margin-top: 0;">
                                    <label for="serverHost">{{ $t("login_server_host") }}</label>
                                    <input type="text" id="serverHost" name="serverHost" @input="setUrl" v-model="url" required class="wiz-txt-1"  :placeholder="$t('login_pls_host')"/>{{$t('login_pls_host')}}
                                </div> -->
                                <div class="wiz-email input-box" :style="{'margin-top': windowPlus ? '30px' : '0' }" :class="{'active': userName || userActive, 'error-box': userName == '' && isUserError}">
                                    <label for="username">{{ $t("login_user_name") }}</label><!--用户名-->
                                    <input type="text" @focus="userActive = !userActive"  @blur="userActive = !userActive; isUserError = true"  id="username" v-model="userName" name="username" required class="wiz-txt-1" :placeholder="$t('login_pls_name')"/><!--请输入用户名-->
                                </div>
                                <div class="wiz-pws input-box" :class="{'active': passActive || password,'error-box': isPassError && !password}">
                                    <label for="password">{{ $t("login_password") }}</label><!--密码-->
                                    <input type="Password" @focus="passActive = !passActive"  @blur="passActive = !passActive;isPassError = true" id="password" v-model="password" name="password" class="wiz-txt-1" :placeholder="$t('login_pls_password')"/><!--请输入密码-->
                                </div>
                                <div class="code-input"><!--图形验证码-->
                                    <div>
                                        <img :src="'data:image/jpeg;base64,' + imgBase64" width="135" height="45" @click="getCaptchaCodeFn"/>
                                    </div>
                                    <input  v-model.trim="captchaCode" @focus="codeActive = !codeActive"  @blur="codeActive = !codeActive;isCodeError = true" :placeholder="$t('forget_tips3')" :class="{'active': passActive || captchaCode,'error-box': isCodeError && !captchaCode}"/>
                                </div>
                                <div v-if="curLang==='en'" style="margin-top: 10px; line-height:25px;">
                                    <!-- 英文国际化，换行显示 -->
                                    <van-checkbox v-model="agreementChecked">
                                        {{$t('group_approved_btn')}}
                                        <a style="color: #44a7f4;" @click.stop.prevent="popupOpen" >{{$t('user_agreement')}}</a>
                                    </van-checkbox>
                                    <div style="text-wrap: nowrap;display: flex;justify-content: end;">
                                        <span @click="$router.push('/forgetPwd')">{{$t("forget_password")}}</span>
                                    </div>
                                </div>
                                <div v-else style="margin-top: 10px; display:flex; justify-content: space-between; line-height:25px;">
                                    <van-checkbox v-model="agreementChecked">
                                        {{$t('group_approved_btn')}}
                                        <a style="color: #075ebb;" @click.stop.prevent="popupOpen" >{{$t('user_agreement')}}</a>
                                    </van-checkbox>
                                    <span @click="$router.push('/forgetPwd')">{{$t("forget_password")}}</span>
                                </div>
                            <!-- <div class="wiz-bar remember-box">
                                    <a href="javascript:void(0)" title="Remember me" v-bind:class="[rememberMeClass]" @click="rememberMe">{{$t('remenber_me')}}</a>
                                </div>-->
                                <div class="wiz-inf login-box">
                                    <a style="display:inline-block;color:#fff;text-align:center;" href="javascript:void(0)" class="wiz-btn-1" v-debounce='login'>{{ $t("btn_login") }}</a><!--登录-->
                                    <img  style="width:25px; line-height:50px; position:absolute; top:12px; left:50%; margin-left: -13px" src=""/>
                                </div>
                            </div>
                        </van-tab>
                    </van-tabs>
                </div>
            </div>
        </div>
        <common-loading :isLoading="isLoading" @openError="changeStauts"></common-loading>
        <van-popup v-model="popShow" round  closeable>
            <div class="agreement">
                <argument></argument>
            </div>
            <div class="agreement-footer">
                <van-button type="info" size="small" class="btn" style="margin-right: 20px;" @click="popupAgree">{{$t("group_approved_btn")}}</van-button>
                <van-button type="default" size="small" class="btn" @click="popupRefuse">{{$t('approve_status_3')}}</van-button>
            </div>
        </van-popup>
    </div>
</template>

<script>
/*eslint-disable no-unused-vars,no-undef*/
import { Dialog, CheckboxGroup, Checkbox, Popup, Button, Tab, Tabs } from 'vant';
import CommonLoading from '@/components/common/loading';
import Watermark from '@/libs/watermark.js';
import DfLogo from './images/wzb_new_logo.png';
import checkVersion from '@/utils/checkVersion';
import { encryptFun, randomString } from '@/utils/crypto';
import argument from '@/components/login/argument';
let Base64 = require('js-base64').Base64;
export default {
    name: 'Login',
    data() {
        return {
            logo: '',
            userName: '',
            password: '',
            captchaCode: '',
            imgBase64: '',
            uuid: '',
            userActive: false,
            passActive: false,
            codeActive: false,
            isUserError: false,
            isPassError: false,
            isCodeError: false,
            telPhone: '',
            telCode: '',
            telPhActive: false,
            telCoActive: false,
            istelPhError: false,
            istelCoError: false,
            show: false,
            statusTitle: '',
            url: this.$store.getters.getAppUrl,
            windowPlus: false,
            rememberMeClass: 'wiz-remember-lose',
            isLoading: false,
            autoLogin: false,
            agreementChecked: false,
            popShow: false, // 隐私协议弹出框,
            count_down: 'count_down',
            btntxt: this.$t('send_code'),
            activeTab: 1,
            timeoutId: null,
            device: '', // 设备
            curLang: ''
        };
    },
    components: {CommonLoading, Dialog, vanCheckbox: Checkbox, vanCheckboxGroup: CheckboxGroup, vanPopup: Popup, vanButton: Button, vanTab: Tab, vanTabs: Tabs, argument},
    created() {
        this.curLang = window.localStorage.getItem('globalLang');
        window.localStorage.removeItem('currentRole');
        // 检查版本更新
        checkVersion(this);
        this.getLoginLogo();
        const logo = window.localStorage.getItem('login-logo');
        if (logo !== null && logo !== undefined && logo !== '') {
            this.logo = logo;
        }
        //app准备
        let ws = null;
        let plusReady = () => {
            if (window.plus) {
                this.$store.commit('setPlus', window.plus);
                this.$store.commit('setAppUrl', this.url);
                this.windowPlus = true;
            }
            plus.key.addEventListener('backbutton', () => {
                this.$router.go(-1);
            }, false);
            ws = plus.webview.currentWebview();
        };
        document.addEventListener('plusready', plusReady, false);
        //自动登陆
        let wizbankUserAuth = false;//window.localStorage.getItem('wizbank-user-auth');
        if (wizbankUserAuth) {
            this.autoLogin = true;
            let wizbankUserAuths = wizbankUserAuth.split('[|]');
            this.device = wizbankUserAuths[0];
            this.url = wizbankUserAuths[1];
            this.userName = wizbankUserAuths[2];
            this.password = wizbankUserAuths[3];
            this.login();
        }
    },
    mounted() {
        this.$refs.wizwrap.style.height = window.document.body.clientHeight + 'px';
        if (window.plus) {
            this.windowPlus = true;
        }
        this.getCaptchaCodeFn();
    },
    watch: {
    },
    methods: {
        // 获取图片验证码
        getCaptchaCodeFn() {
            this.$axios.get('/app/api/captcha/getCaptchaCode').then(res => {
                this.imgBase64 = res.data.image;
                this.uuid = res.data.uuid;
            });
        },
        popupOpen() {
            this.popShow = true;
        },
        popupAgree() {
            this.popShow = false;
            this.agreementChecked = true;
        },
        popupRefuse() {
            this.popShow = false;
            this.agreementChecked = false;
        },
        getLoginLogo() {
            this.$axios.get('/app/user/single/userlogin/logo/mobile/LoginPage').then(res => {
                if (res.data && res.data.errMsg) {
                    if (this.logo !== res.data.errMsg) {
                        this.logo = this.appUrl + res.data.errMsg;
                        window.localStorage.setItem('login-logo', this.appUrl + res.data.errMsg);
                    }
                } else {
                    this.logo = DfLogo;
                    window.localStorage.setItem('login-logo', DfLogo);
                }
            });
        },
        changeStauts(status) {
            this.showTips = status;
        },
        setUrl(e) {
            this.$store.commit('setAppUrl', e.target.value);
        },
        getLoginStatus(callback) {
            this.isLoading = true;
            let _this = this;
            let loginUrl = '/app/user/single/userlogin/login';
            //因为app首次进入加载window.plus有时间差，无法判断是否是移动端。
            // if (this.device && this.device === 'mobile') {
            //     loginUrl = this.url + loginUrl;
            // }
            const key = randomString(16);
            this.$axios({
                method: 'POST',
                url: loginUrl,
                timeout: 15000,
                headers: {
                    'Content-type': 'application/json'
                },
                data: JSON.stringify({
                    usrSteUsrId: this.userName,
                    userPassword: key + encryptFun(this.password, key),
                    captchaCode: this.captchaCode,
                    uuid: this.uuid
                })
            }).then(res => {
                this.isLoading = false;
                window.localStorage.setItem('usrSteUsrId', this.userName);
                window.localStorage.setItem('token', res.data.result.token);
                var strcookie = document.cookie;//获取cookie字符串
                var arrcookie = strcookie.split(';');//分割
                //遍历匹配
                for (var i = 0; i < arrcookie.length; i++) {
                    var arr = arrcookie[i].split('=');
                }
                // 登陆成功获取水印
                if (res.data.code === 200) {
                    this.$axios({
                        method: 'GET',
                        url: '/app/api/system-setting/water-mark',
                        timeout: 1000,
                        headers: {
                            'Content-type': 'application/json'
                        }
                    }).then(res => {
                        let result = res;
                        let waterMark = result.data;
                        if (waterMark.value === 'ON') {
                            Watermark.set(this.userName);
                        }
                        window.localStorage.setItem('waterMarkSwitch', waterMark.value);
                    }).catch((res) => {
                        this.isLoading = false;
                        this.autoLogin = false;
                        this.password = '';
                        window.localStorage.removeItem('wizbank-user-auth');
                        alert(_this.$t('lab_login_fail'));
                    });
                }
                callback(res);
            });
        },
        login() {
            if (!this.userName || !this.password || !this.captchaCode) {
                this.isUserError = true;
                this.isPassError = true;
                this.isCodeError = true;
                return false;
            } else {
                let that = this;
                if (this.agreementChecked === false) {
                    Dialog({ message: this.$t('privacy_agreement') });
                    return;
                }
                this.getLoginStatus(function(res) {
                    window.localStorage.removeItem('wizbank-user-auth');
                    let data = res.data;
                    switch (data.code) {
                    case 200: //登入成功
                        let localStorage = window.localStorage;
                        localStorage.setItem('token', data.result.token);
                        localStorage.setItem('loginUser', data.result.usrEntId);
                        window.sessionStorage.setItem('firstLogin', true);
                        //sessionStorage.setItem('usr_display_bil', data.loginUser.usr_display_bil);
                        /*今日登陆*/
                        /*
                        let loginMsgType = res.data.loginUser.show_alert_msg_type;
                        if (loginMsgType !== undefined && (loginMsgType.includes('first_day_login') || loginMsgType.includes('first_login'))) {
                            that.$store.commit('setIsFirstLogin', true);
                            that.$store.commit('setLoginCredit', parseInt(data.loginUser.loginCredit));
                        }
                        */
                        that.$store.commit('setLoginUser', data.result.usrEntId);
                        that.$store.commit('setIsFirstLogin', parseInt(data.result.loginCredit) > 0);
                        that.$store.commit('setLoginCredit', parseInt(data.result.loginCredit));
                        //APP端离线下载任务回显
                        that.downloadTaskReBuild(that, data.result.usrEntId);
                        /*是否需要修改密码*/
                        // needChangePwd
                        // bNeedToChangePwd
                        if (data.result.needChangePwd) {
                            that.$router.replace({path: '/setPassword', query: {isForceChange: true}});
                        } else {
                            that.$router.replace({path: '/home'});
                        }
                        //保存账号密码用于自动登陆
                        if (window.plus) {
                            window.localStorage.setItem('wizbank-user-auth', 'mobile' + '[|]' + that.url + '[|]' + that.userName + '[|]' + that.password);
                        } else {
                            window.localStorage.setItem('wizbank-user-auth', 'pc' + '[|]' + that.url + '[|]' + that.userName + '[|]' + that.password);
                        }
                        break;
                    case 401:
                        //alert('用户不存在');
                        that.statusTitle = that.$t('lab_login_tips_11');
                        that.show = true;
                        break;
                    case 413:
                        //alert('用户帐号已被冻结，请联系系统管理员。');
                        that.statusTitle = that.$t('lab_login_tips_3');
                        that.show = true;
                        break;
                    case 421:
                        //alert('该帐号已经过期');
                        that.statusTitle = that.$t('lab_login_tips_4');
                        that.show = true;
                        break;
                    case 422:
                        //alert('系统目前十分繁忙，请稍候再试。');
                        that.statusTitle = that.$t('lab_login_tips_5');
                        that.show = true;
                        break;
                    default:
                        that.statusTitle = data.msg;
                        that.show = true;
                        break;
                    }
                });
            }
        },

        rememberMe() {
            if (this.rememberMeClass === 'wiz-remember-good') {
                this.rememberMeClass = 'wiz-remember-lose';
            } else {
                this.rememberMeClass = 'wiz-remember-good';
            }
        },
        downloadTaskReBuild(_this, currentUsrEntId) {
            //app回显下载任务
            if (window.plus) {
                setTimeout(function() {
                    //恢复下载任务
                    window.plus.downloader.enumerate(function(downloads) {
                        //如果上次登陆的用户和此次登陆的用户非同一个用户的话，清除上一个用户下载的文件缓存。
                        let preUsrEntId = window.plus.storage.getItem('loginUserEntId');
                        if (preUsrEntId && preUsrEntId !== currentUsrEntId + '') {
                            let downloadCourseTaskList = window.plus.storage.getItem(preUsrEntId + '-downloadCourseTaskList');
                            let downloadCourseModTask = window.plus.storage.getItem(preUsrEntId + '-downloadCourseModTask');
                            let downloadCourseTaskListObj;
                            let downloadCourseModTaskObj;
                            if (downloadCourseTaskList !== null && downloadCourseTaskList !== undefined && downloadCourseTaskList !== '') {
                                downloadCourseTaskListObj = JSON.parse(downloadCourseTaskList);
                            }
                            if (downloadCourseModTask !== null && downloadCourseModTask !== undefined && downloadCourseModTask !== '') {
                                //Json转Map
                                let jsonArr = JSON.parse(downloadCourseModTask);
                                let tempMap = new Map();
                                for (let i = 0; i < jsonArr.length; i++) {
                                    let jsonObj = jsonArr[i];
                                    tempMap.set(jsonObj[0], jsonObj[1]);
                                }
                                downloadCourseModTaskObj = tempMap;
                            }
                            if (downloadCourseTaskListObj && downloadCourseModTaskObj) {
                                for (let i = 0; i < downloadCourseTaskListObj.length; i++) {
                                    let course = downloadCourseTaskListObj[i];
                                    for (let j = 0; j < course.modules.length; j++) {
                                        let module = downloadCourseModTaskObj.get(course.modules[j]);
                                        //删除本地资源
                                        try {
                                            if (module) {
                                                //本地资源
                                                window.plus.io.resolveLocalFileSystemURL(module.filename, function(entry) {
                                                    entry.file(function(file) {
                                                        entry.remove();
                                                    });
                                                });
                                            }
                                        } catch (e) {}
                                    }
                                }
                            }
                            //清除缓存
                            window.plus.storage.removeItem(preUsrEntId + '-downloadCourseTaskList');
                            window.plus.storage.removeItem(preUsrEntId + '-downloadCourseModTask');
                            _this.$store.commit('setDownloadTaskCourse', []);
                            _this.$store.commit('setDownloadCourseModTask', new Map());
                        } else {
                            let localDownTaskMap = new Map();
                            let cacahDownloadCourseModTask = _this.$store.state.config.downloadCourseModTask;
                            if (cacahDownloadCourseModTask && cacahDownloadCourseModTask.size > 0) {
                                //未退出APP，只是注销了登录
                                return;
                                /*
                                for (let temp of cacahDownloadCourseModTask) {
                                    let module = temp[1];
                                    let url = _this.appUrl + '/app/course/downloadByMod?modId=' + module.modId;
                                    var dtask = _this.$store.state.config.plus.downloader.createDownload(url, {method: 'get', filename: module.filename}, function(d, status) {});
                                    dtask.setRequestHeader('rang', module.dtask.getResponseHeader('rang'));
                                    localDownTaskMap.set(module.dtaskId, dtask);
                                }
                                */
                            } else {
                                for (let i = 0; i < downloads.length; i++) {
                                    localDownTaskMap.set(downloads[i].id, downloads[i]);
                                }
                            }
                            let downloadCourseTaskList = window.plus.storage.getItem(currentUsrEntId + '-downloadCourseTaskList');
                            let downloadCourseModTask = window.plus.storage.getItem(currentUsrEntId + '-downloadCourseModTask');
                            let downloadCourseTaskListObj;
                            let downloadCourseModTaskObj;
                            if (downloadCourseTaskList !== null && downloadCourseTaskList !== undefined && downloadCourseTaskList !== '') {
                                downloadCourseTaskListObj = JSON.parse(downloadCourseTaskList);
                                _this.$store.commit('setDownloadTaskCourse', downloadCourseTaskListObj);
                            }
                            if (downloadCourseModTask !== null && downloadCourseModTask !== undefined && downloadCourseModTask !== '') {
                                //Json转Map
                                let jsonArr = JSON.parse(downloadCourseModTask);
                                let tempMap = new Map();
                                for (let i = 0; i < jsonArr.length; i++) {
                                    let jsonObj = jsonArr[i];
                                    tempMap.set(jsonObj[0], jsonObj[1]);
                                }
                                downloadCourseModTaskObj = tempMap;
                                _this.$store.commit('setDownloadCourseModTask', tempMap);
                            }
                            //重建下载任务
                            if (downloadCourseTaskListObj && downloadCourseModTaskObj) {
                                for (let i = 0; i < downloadCourseTaskListObj.length; i++) {
                                    let course = downloadCourseTaskListObj[i];
                                    for (let j = 0; j < course.modules.length; j++) {
                                        let module = downloadCourseModTaskObj.get(course.modules[j]);
                                        if (module.status !== 'completed') {
                                            module.statusLabel = 'lab_pause';
                                            module.status = 'pause';
                                            module.rate = '';
                                            if (localDownTaskMap.get(module.dtaskId)) {
                                                module.dtask = localDownTaskMap.get(module.dtaskId);
                                                module.isStartDtask = true;
                                                _this.downloadTaskListener(module.dtask, _this, course, module);
                                            }
                                            _this.$store.commit('putDownloadCourseModTask', {'key': module.modId, 'value': module});
                                        }
                                    }
                                }
                            }
                        }
                        window.plus.storage.setItem('loginUserEntId', currentUsrEntId + '');
                    });
                }, 1000);
            }
        },
        checkMobile(mobile) {
            return /^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(mobile);
        },
        clickGetCode() {
            if (!this.checkMobile(this.telPhone) || this.telPhone === '') {
                Dialog({message: this.$t('please_enter_correct_phone')});
                return false;
            } else if (!this.timeoutId) {
                let params = {
                    telPhone: this.telPhone
                };
                if (this.agreementChecked !== true) {
                    Dialog({message: this.$t('please_agree_agreement')});
                    return false;
                }
                //这里调获取验证码的接口
                let loginUrl = '/app/api/captcha/sendSMSCode';
                this.$axios({
                    method: 'POST',
                    url: loginUrl,
                    timeout: 15000,
                    headers: {
                        'Content-type': 'application/json'
                    },
                    params: {
                        telPhone: this.telPhone
                    }
                }).then(res => {
                    if (res.msg === 'SMSFAIL' || res.code === '500') {
                        this.$refs.uTips.show({
                            title: this.$t('obtaining_verification_code'),
                            type: 'info',
                            duration: '2300'
                        });
                    } else {
                        let seconds = 60;
                        clearInterval(this.timeoutId);
                        this.timeoutId = null;
                        this.timeoutId = setInterval(() => {
                            if (seconds === 0) {
                                clearInterval(this.timeoutId);
                                this.btntxt = this.$t('agin_send');
                                this.count_down = 'count_down';
                                this.timeoutId = null;
                                return false;
                            }
                            this.count_down = 'not_count';
                            this.btntxt = seconds + this.$t('second_try');
                            seconds--;
                            // console.log('倒计时', this.btntxt);
                        }, 1000);
                    }
                });
            }
        }
    },
    destroyed() {
        clearInterval(this.timeoutId);
        this.timeoutId = null;
    }
};
</script>

<style scoped lang="less">
    .own-box-area{
        width: 100%;
        height: 100%;
        position: absolute;
    }
    .wiz-box{
        height: 100%;
    }
    .wiz-form{
        height: 100%;
    }
    .update_6p8_mobile_login {
        position: relative;
        height: calc(100vh);
        background: #f7f7f7;
        /*display: flex;*/
        /*flex-direction: column;*/
    }
    .update_6p8_mobile_login .top-box {
        width: 100%;
        position: relative;
    }
    .update_6p8_mobile_login .top-box img {
        width: 100%;
    }
    .update_6p8_mobile_login .top-box .wiz-new-shadow {
        width: 100%;
        position: absolute;
        top: 0;
        z-index: 1;
    }
    .update_6p8_mobile_login .top-box .wiz-new-logo {
        width: 100%;
        position: absolute;
        top: 36%;
        z-index: 10;
    }
    .update_6p8_mobile_login .top-box .wiz-new-logo img {
        width: 50%;
        display: block;
        margin: 0 auto;
    }
    .update_6p8_mobile_login input {
        padding: 0;
    }
    .update_6p8_mobile_login input::-webkit-input-placeholder {
        color: #ccc;
    }
    .update_6p8_mobile_login input:-moz-placeholder {
        color: #ccc;
    }
    .update_6p8_mobile_login input::-moz-placeholder {
        color: #ccc;
    }
    .update_6p8_mobile_login input:-ms-input-placeholder {
        color: #ccc;
    }
    /* .update_6p8_mobile_login input:-webkit-autofill {
        -webkit-box-shadow: 0 0 0px 1000px #f7f7f7 inset;
    } */
    .update_6p8_mobile_login .own-box-login {
        width: auto;
        margin: 30px 30px 25px;
        -webkit-box-flex: 1;
        position: relative;
    }
    .update_6p8_mobile_login .own-box-login .wiz-form {
        width: 100%;
        margin: 0;
        position: relative;
    }
    .update_6p8_mobile_login .own-box-login .wiz-form .input-box {
        margin-top: 30px;
        margin-bottom: 0;
        line-height: 1;
        border-bottom: 1px solid #d8d8d8;
    }
    .update_6p8_mobile_login .own-box-login .code-input {
        margin:10px 0;
        display: flex;
        justify-content: space-between;
    }
    .update_6p8_mobile_login .own-box-login .code-input input {
        width:50%;
        height: 45px;
        padding: 0 0 0 5px;
        font-size: 14px;
        color: rgba(51,51,51,1);
        resize: none;
        border: none;
        background: none;
        outline: none;
        border-bottom: 1px solid #d8d8d8;
    }
    .update_6p8_mobile_login .own-box-login .code-input .error-box{
        border-color: #c40202;
    }
    .update_6p8_mobile_login .own-box-login .code-input .error-box::-webkit-input-placeholder {
        color: #c40202;
    }
    .update_6p8_mobile_login .own-box-login .code-input .error-box:-moz-placeholder {
        color: #c40202;
    }
    .update_6p8_mobile_login .own-box-login .code-input .error-box::-moz-placeholder {
        color: #c40202;
    }
    .update_6p8_mobile_login .own-box-login .code-input .error-box:-ms-input-placeholder {
        color: #c40202;
    }
    .update_6p8_mobile_login .own-box-login .wiz-form .input-box.wiz-pws {
        margin-bottom: 0;
    }
    .update_6p8_mobile_login .own-box-login .wiz-form .input-box label {
        position: relative;
        padding-left: 27px;
        color: #000;
        font-size: 12px;
    }
    .update_6p8_mobile_login .own-box-login .wiz-form .input-box.error-box {
        border-color: #c40202;
    }
    .update_6p8_mobile_login .own-box-login .wiz-form .input-box.error-box input::-webkit-input-placeholder {
        color: #c40202;
    }
    .update_6p8_mobile_login .own-box-login .wiz-form .input-box.error-box input:-moz-placeholder {
        color: #c40202;
    }
    .update_6p8_mobile_login .own-box-login .wiz-form .input-box.error-box input::-moz-placeholder {
        color: #c40202;
    }
    .update_6p8_mobile_login .own-box-login .wiz-form .input-box.error-box input:-ms-input-placeholder {
        color: #c40202;
    }
    .update_6p8_mobile_login .own-box-login .wiz-form .remember-box {
        margin-top: 20px;
        font-size: 14px;
    }
    .update_6p8_mobile_login .own-box-login .wiz-form .remember-box a {
        position: relative;
        padding-left: 22px;
        color: rgb(102,102,102);
    }
    .update_6p8_mobile_login .own-box-login .wiz-form .input-box input {
        width: 100%;
        height: 35px;
        padding: 3px 0 0 0;
        font-size: 14px;
        color: rgba(51,51,51,1);
        resize: none;
        border: none;
        background: none;
        outline: none;
    }
    .update_6p8_mobile_login .own-box-login .wiz-form .input-box label:before, .update_6p8_mobile_login .own-box-login .wiz-form .remember-box a:before {
        content: '';
        float: left;
        width: 25px;
        height: 25px;
        background: url(./images/wzb_new_login_icon.png) no-repeat;
        background-size: 14px;
        position: absolute;
        top: 50%;
        left: 0;
        margin: -13px 0 0 0;
    }
    .update_6p8_mobile_login .own-box-login .wiz-form .input-box.wiz-user label:before {
        background-position: 0 3px;
    }
    .update_6p8_mobile_login .own-box-login .wiz-form .input-box.wiz-email label:before{
        background-position: 0 -21px;
    }
    .update_6p8_mobile_login .own-box-login .wiz-form .input-box.wiz-pws label:before {
        background-position: 0 -44px;
    }
    .update_6p8_mobile_login .own-box-login .wiz-form .input-box.active label {
        color: rgba(153,153,153,1);
    }
    .update_6p8_mobile_login .own-box-login .wiz-form .active.wiz-user label:before {
        background-size: 14px;
    }
    .update_6p8_mobile_login .own-box-login .wiz-form .wiz-email label:before {
        background-size: 14px;
    }
    .update_6p8_mobile_login .own-box-login .wiz-form .active.wiz-email label:before {
        background-size: 14px;
    }
    .update_6p8_mobile_login .own-box-login .wiz-form .active.wiz-pws label:before {
        background-size: 14px;
    }
    .update_6p8_mobile_login .own-box-login .wiz-form .remember-box .wiz-remember-lose:before {
        background-position: 0 -60px;
    }
    .update_6p8_mobile_login .own-box-login .wiz-form .remember-box .wiz-remember-good:before {
        background: url(./images/wzb_new_login_icon-cur.png) no-repeat 0 -60px;
        background-size: 13px;
    }
    .update_6p8_mobile_login .own-box-login .wiz-form .login-box {
        width: 100%;
        /*position: absolute;
        bottom: 0%;*/
        margin-top: 50px;
    }
    .update_6p8_mobile_login .own-box-login .wiz-form .login-box .wiz-btn-1 {
        width: 100%;
        height: 48px;
        line-height: 48px;
        border-radius: 8px;
        font-size: 18px;
        background-color: #075ebb;
    }
    @media screen and (max-height: 580px){
        .update_6p8_mobile_app .own-box-login .wiz-form .input-box {
            margin-top: 15px;
        }
        .update_6p8_mobile_app .own-box-login .wiz-form .input-box input {
            margin-top: -5px;
        }
        .update_6p8_mobile_app .own-box-login .wiz-form .remember-box {
            margin-top: 5px;
        }
    }
    @media screen and (max-height: 500px){
        .update_6p8_mobile_app .own-box-login .wiz-form .input-box {
            margin-top: 10px;
        }
        .update_6p8_mobile_app .own-box-login .wiz-form .input-box input {
            margin-top: -10px;
        }
        .update_6p8_mobile_app .own-box-login .wiz-form .remember-box {
            margin-top: 10px;
        }
    }
    /*弹窗*/
    .update_6p8_alert_new_container {
        padding: 0;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        z-index: 999;
        background-color: rgba(0,0,0,.3);
    }
    .update_6p8_alert_new_container .alert {
        width: 80%;
        margin: 55% auto 0;
        padding: 0;
        background-color: #fff !important;
        opacity: 1;
        border-radius: 20px;
    }
    .update_6p8_alert_new_container .close.new-close {
        float: none;
        position: static;
        display: block;
        width: 100%;
        padding: 20px 0;
        font-size: 24px;
        color: rgb(88,167,244);
        opacity: 1;
    }
    .update_6p8_alert_new_container .content-container {
        padding: 48px 25px;
        border-bottom: 1px solid rgb(230,230,230);
        line-height: 20px;
        font-size: 22px;
        text-align: center;
        color: rgb(26,26,26);
    }
    .update_6p8_mobile_webchat .update_6p8_alert_new_container .alert {
        width: 75%;
    }
    .update_6p8_mobile_webchat .update_6p8_alert_new_container .alert .content-container {
        padding: 21px 26px;
        line-height: 25px;
        font-size: 18px;
        color: #333;
    }
    .update_6p8_mobile_webchat .update_6p8_alert_new_container .alert .content-container .title {
        margin-bottom: 13px;
        font-size: 24px;
        font-weight: bold;
        color: #1a1a1a;
    }
    .update_6p8_mobile_webchat .update_6p8_alert_new_container .alert .close.new-close {
        height: 60px;
        line-height: 1;
        background: transparent;
        -webkit-appearance: none;
    }
    .mm-menu {
        display: none;
    }
    .tips{
        margin-bottom: 30px;
    }
    .agreement {
        width: 340px;
        height: 500px;
        padding: 40px 20px 20px 20px;
    }
    .agreement-footer{
        display: flex;
        justify-content: center;
        margin-bottom: 10px;
        .btn{
            width: 100px;
        }
    }
    /deep/ .van-tabs__nav {
        background: rgb(247, 247, 247);
    }
    .count_down{
        position: absolute;
        right: 0px;
        bottom: 4px;
        text-align: center;
        line-height: 28px;
        width: 100px;
        height: 28px;
        border: 1px solid #0067FF;
        background: linear-gradient(0deg, rgba(0, 103, 255, 0.1) 0%, rgba(0, 103, 255, 0.1) 100%);
        border-radius: 13px;
        font-size: 13px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #0067FF;
    }
    .not_count{
        position: absolute;
        right: 0px;
        bottom: 4px;
        text-align: center;
        line-height: 28px;
        width: 100px;
        height: 28px;
        border: 1px solid #999999;
        background: #999999;
        border-radius: 13px;
        font-size: 13px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #FFFFFF;
    }
/deep/.van-button--info{
    background-color: #075ebb;
    border: 1px solid #075ebb;
}
</style>
